<template>
  <view :class="classNames">
    <slot></slot>
    <text
      v-if="(dotValue || colorValue) && countValue > 0"
      :style="computedDotStyle"
      class="arco-badge-dot"
    ></text>
    <text
      v-if="!dot && !status && countValue > 0"
      :style="computedDotStyle"
      class="arco-badge-number"
    >
      <text>
        {{ maxCount && countValue > maxCount ? `${maxCount}+` : countValue }}
      </text>
    </text>
    <text
      v-if="textValue && !statusValue && !colorValue"
      class="arco-badge-text"
      :style="computedDotStyle"
    >
      {{ text }}
    </text>
    <text
      v-if="statusValue || (colorValue && !hasCount)"
      class="arco-badge-status-wrapper"
    >
      <text
        :class="[
          `${prefixCls}-status-dot`,
          {
            [`${prefixCls}-status-${statusValue}`]: statusValue,
          },
        ]"
        :style="computedDotStyle"
      >
      </text>
      <text v-if="text" class="arco-badge-status-text">
        {{ textValue }}
      </text>
    </text>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, toRefs } from "vue";
const Badge = defineComponent({
  name: "Badge",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    text: {
      type: String,
      default: "",
    },
    dot: {
      type: Boolean,
    },
    dotStyle: {
      type: Object,
      default: () => {},
    },
    maxCount: {
      type: Number,
      default: 99,
    },
    offset: {
      type: Array,
      default: () => [],
    },
    color: {
      type: String,
      default: void 0,
    },
    status: {
      type: String,
      default: void 0,
    },
    count: {
      type: Number,
      default: void 0,
    },
  },
  emits: ["update:visible", "ok", "cancel"],
  setup(props, { slots }) {
    const prefixCls = "arco-badge";
    const { status, count, text, color, dot, dotStyle, offset } = toRefs(props);

    // 样式
    const computedDotStyle = computed(() => {
      const style: any = {};
      const [leftOffset, topOffset] =
        (offset.value == null ? void 0 : offset.value) || [];
      if (leftOffset) {
        style.marginRight = `${-leftOffset}px`;
      }
      if (topOffset) {
        style.marginTop = `${topOffset}px`;
      }

      if (color.value) {
        style.backgroundColor = color.value;
      }

      if (dotStyle.value) {
        Object.assign(style, dotStyle.value);
      }

      return style;
    });

    // 文本
    const textValue = text.value == null ? void 0 : text.value;
    // 颜色
    const colorValue = color.value == null ? void 0 : color.value;
    // 状态
    const statusValue = status.value == null ? void 0 : status.value;
    // 是否圆点
    const dotValue = dot.value == null ? void 0 : dot.value;
    // count值
    const countValue = Number(count.value == null ? void 0 : count.value);
    const hasCount = (count.value == null ? void 0 : count.value) != null;

    const children = computed(() => {
      return Boolean(slots.default);
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        {
          [`${prefixCls}-status`]: status,
          [`${prefixCls}-no-children`]: !children.value,
        },
      ];
    });

    return {
      prefixCls,
      classNames,
      countValue,
      textValue,
      colorValue,
      hasCount,
      statusValue,
      dotValue,
      computedDotStyle,
    };
  },
});
export default Badge;
</script>

<style scoped lang="scss">
.arco-modal-container {
  animation: tans 0.5s ease;
}

@keyframes tans {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
